<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素的居中</title>

    <style>
        .box,.div,.nav,.bar{
            width: 600px;
            height: 600px;
            background-color: chartreuse;
            margin-bottom: 10px;
          
        }

        .div,.nav,.bar{
            position: relative;
        }

        .box1,.div1,.nav1,.bar1{
            width: 200px;
            height: 200px;
            background-color: darkblue;
            color: #fff;
            
        }

        .box1{
            /* 块元素的水平居中的第一种方式要求块元素要设置宽度 然后margin:0 auto */
            margin: auto auto;
        }

        .div1{
            /* 使用绝对定位搭配   transform: translateX也可以实现水平居中 */
            position: absolute;
            left:50%;
            transform: translateX(-50%);
        }

        .nav1{
            /* 使用绝对定位搭配   transform: translateX也可以实现水平居中 */
            position: absolute;
            top:50%;
            transform: translateY(-50%);
/* 
            left:50%;
            transform: translateX(-50%); 
            
            不能将这两种方式结合起来做到垂直水平居中。因为translateX平移的位置会相对与最初元素的位置而不是相对于 translateY之后的位置
            
            总之使用这种方式只能让元素做到水平居中或垂直居中，不能做到同时水平垂直居中(除非内部盒子的高宽是由内容撑起的而不是设置的高宽)
            */
        }

        .bar1{
            /* 让元素水平垂直居中的方式 */
             position: absolute;
             top:0;
             left: 0;
             bottom: 0;
             right: 0;
             margin: auto;
        }


    </style>
</head>
<body>

  <div class="box">
      <div class="box1">1</div>
  </div>    

  <div class="div">
      <div class="div1">2</div>
  </div>

  <div class="nav">
    <div class="nav1">3</div>
  </div>

    <div class="bar">
        <div class="bar1">4</div>
</div>
</body>
</html>